<template>
    <div class='h-100 relative'>
        <section class='flex'>
            <div style='flex:13' class='flex'>
                <div style='flex:9'>
                    <div class='order-info'>
                        <glass-box>
                            <div slot='title' class='color-f5f5f5'>订单类型</div>
                            <div class='m-t-10'>
                                <div class='order-info-chart'>
                                    <order-source-chart v-model='orderSourceData'></order-source-chart>
                                </div>
                            </div>
                        </glass-box>
                    </div>
                    <div class='order-info m-t-20'>
                        <glass-box>
                            <div slot='title' class='color-f5f5f5'>计费类型</div>
                            <div class='m-t-10'>
                                <div class='order-info-chart'>
                                    <charging-category v-model='rechargingCategoryData'></charging-category>
                                </div>
                            </div>
                        </glass-box>
                    </div>
                </div>
                <div style='flex:11' id='part-2' class='m-l-20'>
                    <glass-box>
                        <div slot='title' class='color-f5f5f5'>充电结束原因</div>
                        <div v-size.paddingLeft='55' class='m-t-10'>
                            <div>
                                <div class='color-a9abaf'>每30分钟更新一次</div>
                                <div class='m-t-30'>
                                    <finish-reason-chart v-model='finishReasonData'></finish-reason-chart>
                                </div>
                            </div>
                        </div>
                        <div v-size.marginTop='40'>
                            <div v-size.paddingLeft='55'>
                                <span class='color-f5f5f5 f-20'>充电时长区间</span>
                            </div>
                            <div class='m-t-20'>
                                <div id='section-charge-time'>
                                    <section-charge-chart v-model='sectionChargeData'></section-charge-chart>
                                </div>
                            </div>
                        </div>
                    </glass-box>
                </div>
            </div>

            <div style='flex:7' id='order-amount' class='m-l-20'>
                <glass-box>
                    <div slot='title' class='color-f5f5f5'>订单累计金额<span v-size.fontSize='14'>（元）</span></div>
                    <div v-size.paddingLeft='55' class='m-t-10'>
                        <div>
                            <div class='color-a9abaf'>每30分钟更新一次</div>
                            <div class='m-t-30'>
                                <order-amount-chart v-model='orderAmountData'></order-amount-chart>
                            </div>
                        </div>
                    </div>
                    <div class='m-t-40'>
                        <div v-size.paddingLeft='55'>
                            <span class='color-f5f5f5 f-20'>截止昨日近订单金额<span v-size.fontSize='14'>（元）</span></span>
                            <color-block-text class='m-l-20' type='square' color='#20c0fd'>订单金额</color-block-text>
                            <color-block-text class='m-l-20' type='line' color='#59ffaf'>实际消费金额</color-block-text>
                        </div>
                        <div class='m-t-20'>
                            <div id='lately-order-amount'>
                                <lately-order-amount-chart v-model='latelyOrderAmountData'></lately-order-amount-chart>
                            </div>
                        </div>
                    </div>
                </glass-box>
            </div>
        </section>

        <section class='flex m-t-20'>
            <div style='flex:13'>
                <div id='part-5'>
                    <glass-box>
                        <div slot='title' class='color-f5f5f5'>订单状态<span class='color-a9abaf f-14 m-l-10'>每30分钟更新一次</span></div>
                        <div class='flex m-t-10'>
                            <div v-flex='9'></div>
                            <div v-flex='11' v-size.paddingLeft='30' class='m-l-20'>
                                <arrow-title><span slot='title'>下单次数<span class='color-a9abaf f-14 m-l-10'>每30分钟更新一次</span></span></arrow-title>
                            </div>
                        </div>
                        <div class='flex m-t-20'>
                            <div style='flex:9' id='order-status-chart' class='m-t-20'>
                                <order-status-chart v-model='orderStatusData'></order-status-chart>
                            </div>
                            <div style='flex:11' class='m-l-20'>
                                <lately-charge-count-chart v-model='latelyChargeCountData'></lately-charge-count-chart>
                            </div>
                        </div>
                    </glass-box>
                </div>
            </div>
            <div style='flex:7' class='m-l-20'>
                <div id='consume-power'>
                    <glass-box>
                        <div slot='title' class='color-f5f5f5'>充电电量<span class='color-a9abaf f-14 m-l-10'>度</span></span></div>
                        <div class='m-t-10'>
                            <div>
                                <div class='color-a9abaf' v-size.paddingLeft='55'>截止昨日近七天，所有用户</div>
                                <div class='m-t-15' id='consume-power-chart'>
                                    <consume-power-chart v-model='consumePowerData'></consume-power-chart>
                                </div>
                            </div>
                        </div>
                    </glass-box>
                </div>
            </div>
        </section>
    </div>
</template>

<script src='./index.js'></script>

<style scoped lang='scss' src='./index.scss'></style>